<template>
	<view style="min-height: 700px;">
		 
		<view class="flex justify-center">
			<view class="padding radius text-center ">
				<view class="uni-h4">
					<image class="portrait" :src="info.avatar ? info.avatar : '/static/missing-face.png'" mode=""></image>
				</view>
				<view class=" text-Abc">
					<label class="uni-h5">{{info.level_text}}</label>
				</view>
			</view>
		</view>

		<view class=" grid col-2 padding-sm ">
			<view class="padding-sm ">
				<view class="padding radius text-center bg-gradual-red">
					<view class="uni-h4">{{i18n.team.today}}</view>
					<view class=" text-Abc">
						<label class="uni-h5">{{info.todayzt}}</label>
					</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="padding radius text-center bg-gradual-orange">
					<view class="uni-h4">{{i18n.team.yxzt}}</view>
					<view class=" text-Abc">
						<label class="uni-h5">{{info.ztnum}}</label>
					</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="padding radius text-center bg-gradual-yellow ">
					<view class="uni-h4">{{i18n.team.tdnum}}</view>
					<view class=" text-Abc">
						<label class="uni-h5">{{info.tdnum}}</label>
					</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="padding radius text-center bg-gradual-purple">
					<view class="uni-h4">{{i18n.team.tdtotal}}</view>
					<view class=" text-Abc">
						<label class="uni-h5">{{info.tdyj}}</label>
					</view>
				</view>
			</view>
		
		</view>

		<scroll-view class="panel-scroll-box" scroll-y="true" @scrolltolower="loadMore">
			<view class="flex margin-xs radius bg-black margin-bottom" v-for="(item, index) in tabItem.newsList" :key="index"
			 @tap="go(item.id)">
				<!-- <view class="flex-sub padding-sm radius">
					<image class="portrait" :src="item.avatar ? item.avatar : '/static/missing-face.png'" mode=""></image>

				</view> -->
				<view class="flex-twice   padding-sm radius ">
					<view class="toptext text-right">

						<text style="float: left;">{{i18n.team.account}}：</text>
						<text>{{item.mobile.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3")}}</text>
					</view>
					<view class="toptext text-right">

						<text style="float: left;">{{i18n.team.yxzt2}}</text>
						<text>{{item.ztnum}}</text>
					</view>
					<view class="toptext text-right">
						<text style="float: left;">{{i18n.team.tdnum2}}</text>
						<text>{{item.tdnum}}</text>
					</view>
				</view>
				<view class="flex-twice   padding-sm radius ">
					<view class="toptext text-right">
						<text style="float: left;">{{i18n.team.level}}：</text>
						<text>{{item.level_text}}</text>
					</view>
					<view class="toptext text-right">
						<text style="float: left;">{{i18n.team.today2}}</text>
						<text>{{item.todayzt}}</text>
					</view>
					<view class="toptext text-right">
						<text style="float: left;">{{i18n.team.tdtotal2}}</text>
						<text>{{item.tdyj}}</text>
					</view>

				</view>
			</view>
			<!-- 上滑加载更多组件 -->
			<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';

	export default {
		data() {
			return {
				uid: 1,
				info: {},
				tabItem: {
					name: '已取消',
					id: '3',
					newsList: [],
					loadMoreStatus: 0, //加载更多 0加载前，1加载中，2没有更多了
					refreshing: 0,
					page: 1,
				}
			}
		},
		components: {
			mixLoadMore,
		},
		computed: { 
			i18n() {
				return this.$t('message');
			}
		}, 
	    onLoad(data) {
			this.uid = data.uid ? data.uid : 1;
		   uni.setNavigationBarTitle({
            	title: this.i18n.team.title
        	});
			 
		}, 
		onShow() { 
			this.init()
		}, 
		methods: {
			init() {
				this.$http.post('index.myzt', {
					uid: this.uid
				}).then(res => {
					console.log(res)
					this.info = res.data.info;
				});
				this.tabItem.page = 1;
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				console.log(666)
				this.loadNewsList('add');
			},
			//列表
			loadNewsList(type) {

				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.tabItem.loadMoreStatus === 2) {
						return;
					}
					this.tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					this.tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					this.tabItem.page = 1;
				}
				// 请求数据
				let send = {
					uid: this.uid,
					page: this.tabItem.page
				};
				this.$http.post('index.myzt', send).then(res => {
				 
					let info = res.data.zt;
					let list = info.data;
					if (type === 'refresh') {
						this.tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						this.tabItem.refreshing = false;
						// #endif
						this.tabItem.loadMoreStatus = 0;
					}
					list.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						this.tabItem.newsList.push(item);
					})

					this.tabItem.loadMoreStatus = info.current_page >= info.last_page ? 2 : 0;
					this.tabItem.page += 1;
				})

			},
		go(id){
				uni.redirectTo({ 
					url: `/pages/user/child/team?uid=`+id
				})
			},
			// yq() { 
			// 	if(this.myconfig.vip_tui>this.userinfo.wall2){
			// 		this.$api.msg(this.i18n.team.err1);
			// 	}
				 
			// 	uni.navigateTo({
			// 		url: `/pages/user/share`
			// 	})
			// }
		}
	}
</script>

<style>
	.panel-scroll-box {
		/* height: 100%; */
		height: 600px;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	image {
		display: inline-block;
		width: 120upx;
		height: 120upx;
		margin: 5upx;
		border-radius: 30upx;
	}
</style>
